<template>
    <div>
      <Row class="formRow">
        <Col span="2" class="rightRow">
          <span class="ModelInputTitle">标签名称</span>
        </Col>
        <Col span="3" class="leftRow">
          <Input v-model="inlineForm.tagName" placeholder="标签名称" clearable style="width:100%" size="large"></Input>
        </Col>
        <Col span="2" class="rightRow">
          <span class="ModelInputTitle">产品类型</span>
        </Col>
        <Col span="3" class="leftRow">
          <Select  size="large" style="width:100%" v-model="inlineForm.productType" >
            <Option v-for="c in productTypeList"  :value="c.id" :key="c.id">{{c.prdTypeName}}</Option>
          </Select>
        </Col>
        <Col span="2" class="rightRow">
          <span class="ModelInputTitle">是否有效</span>
        </Col>
        <Col span="2" class="leftRow">
          <Select  size="large" style="width:100%" v-model="inlineForm.valid" placeholder="是否有效">
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
        </Col>
        <Col span="10"  class="leftRow">
          <Button type="primary" @click="onSubmit">查询</Button>
          <Button type="primary" @click="resetForm">重置</Button>
          <Button type="primary" @click="onAdd">添加</Button>
        </Col>
      </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :placement="placement" :current="1" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>

      <Modal
        v-model="add"
        title="添加"
        @on-ok="addok"
        @on-cancel="cancel('您取消了操作')" width="600">

        <Row>
          <Col span="12">   <span class="ModelInputTitle">产品类型</span>
          <Select  size="large" style="width:200px" v-model="addForm.prdTypeId" placeholder="产品类型" filterable>
            <Option v-for="p in productTypeList"  :value="p.id" :key="p.id">{{p.prdTypeName}}</Option>
          </Select></Col>
          <Col span="12">
          <span class="ModelInputTitle">标签名称</span><Input v-model="addForm.tagName" size="large" style="width: 200px" placeholder="标签名称"></Input>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">是否有效</span>
          <Select  size="large" style="width:200px" v-model="addForm.valid" placeholder="是否有效">
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
          </Col>
          <Col span="12">   <span class="ModelInputTitle">父级标签</span>
            <Select  size="large" style="width:200px" v-model="addForm.parentTag" placeholder="父级标签">
              <Option v-for="p in parentTag"  :value="p.id" :key="p.id">{{p.typeTagName}}</Option>
            </Select></Col>
        </Row>

      </Modal>
      <Modal
        v-model="edit"
        title="编辑"
        @on-ok="editok"
        @on-cancel="cancel('您取消了操作')" width="600">

        <Row>
          <Col span="12">   <span class="ModelInputTitle">产品类型</span>
          <Select  size="large" style="width:200px" v-model="editForm.prdTypeId" placeholder="产品类型" filterable>
            <Option v-for="p in productTypeList"  :value="p.id" :key="p.id">{{p.prdTypeName}}</Option>
          </Select></Col>
          <Col span="12">
          <span class="ModelInputTitle">标签名称</span><Input v-model="editForm.tagName" size="large" style="width: 200px" placeholder="标签名称"></Input>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">是否有效</span>
          <Select  size="large" style="width:200px" v-model="editForm.valid" placeholder="是否有效">
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
          </Col>
          <Col span="12">   <span class="ModelInputTitle">父级标签</span>
            <Select  size="large" style="width:200px" v-model="editForm.parentTag" placeholder="父级标签">
              <Option v-for="p in parentTag"  :value="p.id" :key="p.id">{{p.typeTagName}}</Option>
            </Select></Col>
        </Row>

      </Modal>
    </div>
</template>
<script type="text/ecmascript-6">
  import axios from "axios";
    export default {
        data() {
            return {
              page:1,
              pageSize:10,
              placement:"bottom",
              inlineForm:{
                tagName:"",
                productType:"",
                valid:""
              },
              productTypeList:[],//产品类型
              parentTag:[],
              tableData:[],
              loading:true,
              total:0,
              cloums:[
                {
                  title: '标签名称',
                  key: 'typeTagName',
                  width:150,
                  align:"center"
                },
                {
                  title: '父标签名称',
                  key: 'parentName',
                  width:150,
                  align:"center"
                },
                {
                  title: '产品名称',
                  key: 'prdTypeName',
                  width:150,
                  align:"center"
                },
                {
                  title: '是否启用',
                  key: 'valid',
                  width:150,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creator',
                  width:150,
                  align:"center"
                },
                {
                  title: '修改人',
                  key: 'updater',
//                  width:150,
                  align:"center"
                },
                {
                  title: '操作',
                  width:120,
                  fixed:"right",
                  render:(h,params)=>{
                    return h("div",[
                      h("Button",{
                        props:{
                          type:"error"
                        },
                        on:{
                          click:()=>{
                            console.log(params.row)
                            this.edit = true;
                            this.editForm.tagName = params.row.typeTagName,
                              this.editForm.prdTypeId =params.row.prdTypeId;
                            this.editForm.valid = params.row.valid=="是"?"1":"0";
                             this.editForm.id = params.row.id;
                            this.editForm.parentTag = params.row.parentId;
                          }
                        }
                      },"编辑")
                    ])
                  }
                }
              ],
              add:false,
              addForm:{
                prdTypeId:"",
                tagName:"",
                valid:"",
                parentTag:""
              },
              edit:false,
              editForm:{
                prdTypeId:"",
                tagName:"",
                valid:"",
                id:"",
                parentTag:''
              }
            }
        },
      mounted(){
          this.getInfo();
          this.init();
      },
      methods:{
        getInfo(){
          axios.post("label/productTypeList").then((res)=>{
              if(res.data.code =="000000"){
                this.productTypeList = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg});
              }
          })
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          axios.post("/label/productTypeParentList").then((res)=>{
            if(res.data.code =="000000"){
              console.log(res.data.data);
              this.parentTag = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        init(){
          var qs = require("qs");
          var param = qs.stringify({
            page:this.page,
            pageSize:this.pageSize,
            prdTypeId:this.inlineForm.productType,
            typeTagName:this.inlineForm.tagName,
            valid:this.inlineForm.valid
          });
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          axios.post("label/selectProductLabelList",param).then((res)=>{
              if(res.data.code=="000000"){
                  this.loading = false;
                  this.total = res.data.count;
                  for(let i=0;i<res.data.data.length;i++){
                    res.data.data[i].valid =  res.data.data[i].valid=="1"?"是":"否";
                  }
                  this.tableData = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg});
              }
          })

        },
        onSubmit(){
          this.init();
        },
        resetForm(){
          this.inlineForm.productType = "";
          this.inlineForm.tagName = "";
          this.inlineForm.valid = "";
          this.page = 1;
          this.pageSize = 10;
          this.init();
        },
        onAdd(){
          this.add = true;
        },
        changePage(page){
          this.page = page;
          this.loading = true;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.pageSize = size;
          this.loading = true;
          this.init();
        },
        addok(){
          var qs = require("qs");
          var prdTypeName = "";
          for(let i=0;i<this.productTypeList.length;i++){
            if(this.productTypeList[i].id == this.addForm.prdTypeId){
              prdTypeName = this.productTypeList[i].prdTypeName
            }
          }
          var param = qs.stringify({
            typeTagName:this.addForm.tagName,
            prdTypeId:this.addForm.prdTypeId,
            prdTypeName:prdTypeName,
            valid:this.addForm.valid,
            parentId:this.addForm.parentTag
          });
          axios.post("label/saveProductLabel",param).then((res)=>{
            if(res.data.code =="000000"){
              this.$Notice.success({title:"添加成功"});
              this.init();
              this.getInfo();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
        editok(){
          var prdTypeName = "";
          for(let i=0;i<this.productTypeList.length;i++){
            if(this.productTypeList[i].id == this.editForm.prdTypeId){
              prdTypeName = this.productTypeList[i].prdTypeName
            }
          }
          var qs = require("qs");
          var param = qs.stringify({
            typeTagName:this.editForm.tagName,
            prdTypeId:this.editForm.prdTypeId,
            prdTypeName:prdTypeName,
            valid:this.editForm.valid,
            id:this.editForm.id,
            parentId:this.editForm.parentTag
          });
          axios.post("label/updateProductType",param).then((res)=>{
            if(res.data.code =="000000"){
              this.$Notice.success({title:"编辑成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        }
      }
    }
</script>
